<template>
  <el-tabs v-model="activeName" class="tabs" type="border-card">
    <el-tab-pane
      v-for="(item, index) in tabsLabel"
      :key="item"
      :label="item"
      :name="item"
      @mouseover="changeTab(item)"
      style="width: 100%"
    >
      <el-scrollbar height="240px">
        <div
          class="article"
          v-for="article in tabsData[index]"
          :key="article.id"
          @click="
            $router.push({
              name: 'article',
              query: {
                articleId: article.id,
              },
            })
          "
        >
          <span class="row center" style="position: relative">
            <i class="spot"></i>
            <el-text truncated style="width: 240px">
              {{ article.title }}
            </el-text>
          </span>
          <span>
            {{ article.time.slice(5, 10) }}
          </span>
        </div>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  props: ['types'],
  setup(props) {
    const tabsData = ref<any>([])
    const tabsLabel = ref(props.types)
    const activeName = ref()
    const router = useRouter()
    onMounted(async () => {
      activeName.value = props.types[0]
      console.log(activeName.value)
      console.log(tabsLabel.value[0])
      console.log(tabsLabel.value[0] === activeName.value)

      for (let i = 0; i < props.types.length; i++) {
        await axios
          .get('/api/getEssayByType', {
            params: {
              type: props.types[i],
            },
          })
          .then((res) => {
            tabsData.value.push(res.data.data)
            console.log(res.data.data)
          })
      }
    })
    const toArticles = () => {
      router.push({
        path: '/articles',
        query: {
          articleType: activeName.value,
        },
      })
    }
    const changeTab = (tabName: string) => {
      console.log(tabName)

      activeName.value = tabName
    }
    return {
      tabsData,
      tabsLabel,
      toArticles,
      activeName,
      changeTab,
    }
  },
})
</script>

<style scoped>
.tabs {
  margin: 0px;
  background: white;
  border-radius: 4px;
}
.article {
  /* width: 100%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 4px 12px 4px 12px;
}
.article:hover {
  color: blue;
}
.el-text:hover {
  color: blue !important;
}
.el-tabs__item.is-active {
  color: blue !important;
}

.spot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  position: absolute;
  left: -12px;
  background: #205ab4;
}
</style>
